// // map中的配置选项,target 表示地图实例挂载的容器 view 表示地图的视图 Layers 表示地图的底图(都有一个底图) source 图层数据源
import Map from 'ol/Map'
import './style.css'
import 'ol/ol.css'
import View from 'ol/View'
import TileLayer from 'ol/layer/Tile'
import { XYZ } from 'ol/source'
const view = new View({
  center: [114.25, 30.59],
  zoom: 10,
  projection: "EPSG:4326"
})
const gaodeLayer = [new TileLayer({
  source: new XYZ({
    url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}',// 高德的数据源
  }),
})]
const map = new Map({
  target: 'map',
  view,
  layers: gaodeLayer
})
const btn = document.querySelector('.btns')
btn.onclick = function () {
  console.log('dianji');
  view.setCenter([116.2546, 39.92])
}
// btn.addEventListener('click', () => {
//   console.log('dianji');
//   view.setCenter([116.2546, 39.92])
// })